<!-- author: lizq -->
<!-- date: 2023-03-01 15:09:44 -->
<!-- description: table -->

<template>
  <!-- 列表 -->
  <el-table
    v-if="tableShow"
    ref="refTable"
    v-loading="loading"
    :data="tableData"
    :style="{ 'width:': tableInfo.width ? tableInfo.width : width }"
    :row-key="tableInfo.rowKey ? tableInfo.rowKey : rowKey"
    :default-expand-all="tableInfo.isExpandAll ? tableInfo.isExpandAll : isExpandAll"
    :expand-row-keys="tableInfo.expandRowKeys ? tableInfo.expandRowKeys : expandRowKeys"
    :stripe="tableInfo.stripe ? tableInfo.stripe : stripe"
    :border="tableInfo.border ? tableInfo.border : border"
    @selection-change="tableSelection"
  >
    <!-- 多选 -->
    <el-table-column v-if="tableInfo.isSelect" fixed="left" type="selection" width="55" align="center" />
    <el-table-column
      v-else-if="tableInfo.isSelect == undefined"
      v-hasBut="['B']"
      :fixed="tableInfo.selectFixed ? tableInfo.selectFixed : 'left'"
      type="selection"
      width="55"
      align="center"
    />
    <!-- 序号 -->
    <el-table-column v-if="pageNumber" type="index" label="序号" width="55" align="center">
      <template #default="{ $index }">
        {{ $index + pageNumber }}
      </template>
    </el-table-column>
    <!-- 列-内容 -->
    <el-table-column
      v-for="(item, i) in tableHeader"
      :key="i"
      :prop="item.prop"
      :label="item.label"
      :column-key="i.toString()"
      :sortable="item.sort ? 'custom' : false"
      :align="item.align ? item.align : 'center'"
      :fixed="item.fixed ? item.fixed : false"
      show-overflow-tooltip
      :width="item.width ? item.width : ''"
    >
      <!-- 列-状态 -->
      <template v-if="item.prop == 'status' && item.type != 'slot'" #default="scope">
        <el-switch
          v-model="scope.row.status"
          inline-prompt
          active-text="启用"
          inactive-text="禁用"
          width="60"
          :active-value="0"
          :inactive-value="1"
          @change="operate(scope.row, 0)"
        />
      </template>
      <!-- 列-字典 -->
      <template v-else-if="item.dict" #default="scope">
        <G-dict-tag :options="$dict[item.dict]" :value="scope.row[item.prop]" tag="true" />
      </template>
      <!-- 列-slot -->
      <template v-else-if="item.type == 'slot'" #default="scope">
        <slot :name="item.prop" :row="scope.row"></slot>
      </template>
    </el-table-column>
    <!-- 操作-slot -->
    <el-table-column
      v-if="tableInfo.isOperate == false ? tableInfo.isOperate : isOperate && (!tableInfo.operateBut || !tableInfo.operateBut.length)"
      label="操作"
      align="center"
      :width="tableInfo.operateWidth ? tableInfo.operateWidth : operateWidth"
      fixed="right"
    >
      <template #default="scope">
        <slot :row="scope.row"></slot>
      </template>
    </el-table-column>
    <!-- 操作-list -->
    <el-table-column v-else-if="isOperate" label="操作" align="center" :width="tableInfo.operateWidth ? tableInfo.operateWidth : operateWidth" fixed="right">
      <template #default="scope">
        <div class="table-operation">
          <span v-for="(item, i) in tableInfo.operateBut" :key="i">
            <span v-if="i != 0" v-hasBut="[item.power]" class="split"></span>
            <el-button
              v-if="item.text != '更多'"
              v-hasBut="[item.power]"
              :disabled="setDisabled(item.power, scope.row)"
              link
              :type="setType(item.text)"
              @click="operate(scope.row, i + 1)"
            >
              {{ item.text }}
            </el-button>
            <el-dropdown v-else trigger="click">
              <span class="el-dropdown-link">
                {{ item.text }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-for="(a, s) in item.list" :key="s" @click="operate(scope.row, i + s + 1)">{{ a }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </span>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import { useSystemStore } from "@/store/system";
const $systemStore = useSystemStore();

const $props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  tableHeader: {
    type: Array,
    default: () => []
  },
  tableInfo: {
    type: Object,
    default: () => {}
  },
  loading: {
    type: Boolean,
    default: false
  },
  pageNo: {
    type: Number,
    default: 0
  },
  pageSize: {
    type: Number,
    default: 0
  },
  isSelect: {
    type: Boolean,
    default: true
  }
});
const $emit = defineEmits(["callBackData"]);

//初始化-字典数据
const getDict = getCurrentInstance().proxy.$dict;
const $dict = ref([]);
watch(
  () => $props.tableHeader,
  (newVal) => handleDict(newVal)
);

//分页参数
const pageNumber = computed(() => {
  if ($props.pageNo && $props.pageSize) {
    return ($props.pageNo - 1) * $props.pageSize + 1;
  } else {
    return 0;
  }
});

const refTable = ref(null);
const state = reactive({
  tableShow: true,
  //初始化-tableInfo
  isExpandAll: false,
  expandRowKeys: [],
  width: "100%",
  rowKey: "id",
  stripe: true,
  border: true,
  isOperate: true, // operate = true, 必写项 slot / operateBut, 二选一
  operateBut: [], //// 索引 + 1 = operate(val,i) 中的 i
  operateWidth: 200
});
const { tableShow, isExpandAll, expandRowKeys, width, rowKey, stripe, border, isOperate, operateWidth } = toRefs(state);

onMounted(() => {
  handleDict($props.tableHeader);
  isOperateShow();
});

//处理字典
const handleDict = (arr) => {
  if (arr && arr.length) {
    let dictList = [];
    arr.forEach((item) => {
      if (item.dict) {
        dictList.push(item.dict);
      }
    });
    if (dictList.length) $dict.value = getDict(dictList);
  }
};

//table-操作
const operate = (val, i) => {
  $emit("callBackData", val, i);
};

//table-多选
const tableSelection = (val) => {
  $emit("callBackData", val);
};

//table-展开/收起
const tableResh = () => {
  state.tableShow = false;
  state.isExpandAll = !state.isExpandAll;
  nextTick(() => {
    state.tableShow = true;
  });
};

//清空勾选
const clearSelection = () => {
  refTable.value.clearSelection();
};

//table-but-type
const setType = (val) => {
  if (val.indexOf("删除") !== -1) {
    return "danger";
  } else {
    return "primary";
  }
};
//判定按钮的启用/禁用
const setDisabled = (val, obj) => {
  if (val == "A" && obj.status == "1") {
    return true;
  }
};

const isOperateShow = () => {
  let showFlag = false;
  if (
    $props.tableInfo.isOperate == false ? $props.tableInfo.isOperate : state.isOperate && ($props.tableInfo.operateBut || $props.tableInfo.operateBut.length)
  ) {
    let btnList = {};
    $props.tableInfo.operateBut.forEach((item) => {
      if (item.power != "") {
        btnList[item.power] = true;
      } else {
        showFlag = true;
      }
    });
    let storeBtn = $systemStore.button;
    if (!showFlag && storeBtn.length) {
      showFlag = storeBtn.some((key) => {
        return btnList[key];
      });
    }
  } else {
    state.isOperate = false;
  }
  state.isOperate = showFlag;
};
defineExpose({ clearSelection, tableResh });
</script>

<style scoped lang="scss">
.el-dropdown {
  margin-top: 4px;
  cursor: pointer;
}
.table-operation {
  display: flex;
  justify-content: center;
  align-items: center;
  .split {
    display: inline-block;
    width: 1px;
    height: 12px;
    line-height: 12px;
    background-color: rgba(70, 114, 236, 0.5);
    margin: 0 8px;
    position: relative;
    top: 2px;
  }
  .el-button {
    padding: 0;
  }
}
</style>
